﻿@page "/markdowns"
@using Microsoft.Extensions.DependencyInjection
@inject VersionService VersionManager
@inject IStringLocalizer<Markdowns> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["H1"]</h4>

<p><b>@Localizer["P1"] ：</b></p>

<p>@((MarkupString)Localizer["P2"].Value)</p>

<p><b>@Localizer["P3"]</b></p>

<p>@((MarkupString)Localizer["P4"].Value)</p>

<div class="code-label">.NET CLI</div>
<Pre class="no-highlight">dotnet add package BootstrapBlazor.Markdown --version @Version</Pre>

<div class="code-label">PackageReference</div>
<Pre class="no-highlight">&lt;PackageReference Include="BootstrapBlazor.Markdown" Version="@Version" /&gt;</Pre>

<div class="code-label">Package Manager</div>
<Pre class="no-highlight">Install-Package BootstrapBlazor.Markdown -Version @Version</Pre>

<h4>@Localizer["Css"]</h4>

<p>@Localizer["CssText"]</p>

<h4>@Localizer["Js"]</h4>

<p>@Localizer["JsText"]</p>

<h4>@Localizer["H4"]</h4>

<Tips>@Localizer["Tips1"]</Tips>

<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal">
    <p>@((MarkupString)Localizer["P5"].Value)</p>
    <div style="width: 100%; height: 300px;">
        <Markdown Language="@Language" @bind-Value="@MarkdownString" @bind-Html="@HtmlString" />
    </div>
    <div class="mt-3">
        <textarea class="form-control" rows="6" disabled="disabled">
            @MarkdownString
        </textarea>
    </div>
    <div class="mt-3">
        <textarea class="form-control" rows="6" disabled="disabled">
            @HtmlString
        </textarea>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="Async">
    <Button Text="@Localizer["ButtonText"]" IsAsync="true" OnClick="GetAsyncString" Icon="fa fa-fa" class="mb-3" />
    <Markdown Value="@AsyncValue" @ref="MarkdownSetValue"></Markdown>
</DemoBlock>

<DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]" Name="CommonProperty">
    <p>@((MarkupString)Localizer["P6"].Value)</p>
    <Markdown Height="500" MinHeight="300" Placeholder="@Localizer["PlaceHolder"]" PreviewStyle="PreviewStyle.Tab" InitialEditType="InitialEditType.Wysiwyg" Language="@Language"></Markdown>
</DemoBlock>

<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="IsViewer">
    <p>@((MarkupString)Localizer["P7"].Value)</p>
    <Markdown IsViewer="true" Value="# Viewer Mode"></Markdown>
</DemoBlock>

<DemoBlock Title="@Localizer["IsDarkBlockTitle"]" Introduction="@Localizer["IsDarkBlockTitle"]" Name="IsDark">
    <Markdown IsDark="true" Value="# Dark Mode"></Markdown>
</DemoBlock>

<DemoBlock Title="@Localizer["EnableHighlightBlcokTitle"]" Introduction="@Localizer["EnableHighlightBlcokIntro"]" Name="EnableHighlight">
    <Markdown EnableHighlight="true" Value="@JsString"></Markdown>
</DemoBlock>

<DemoBlock Title="@Localizer["BrowserBlcokTitle"]" Introduction="@Localizer["BrowserBlcokIntro"]" Name="Browser">
    <Markdown @ref="Markdown"></Markdown>
    <div class="mt-3">
        <Button OnClickWithoutRender="@(async () => await Markdown.DoMethodAsync("insertText", "# test"))">@Localizer["BrowserButtonText1"]</Button>
        <Button OnClickWithoutRender="@(async () => await Markdown.DoMethodAsync("insertText", $"![{Localizer["BrowserText"]}](https://i.niupic.com/images/2022/04/01/9Y6T.jpg)"))">@Localizer["BrowserButtonText2"]</Button>
        <Button OnClickWithoutRender="@(async () => await Markdown.DoMethodAsync("moveCursorToEnd"))">@Localizer["BrowserButtonText3"]</Button>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["ValidateTitle"]" Introduction="@Localizer["ValidateIntro"]" Name="Validate">
    <ValidateForm Model="@Model">
        <div class="row g-3 form-inline">
            <div class="col-12">
                <Markdown @bind-Value="Model.Name"></Markdown>
            </div>
            <div class="col-12">
                <Button ButtonType="ButtonType.Submit" Icon="fa fa-fw fa-save" Text="@Localizer["SubmitText"]" />
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<AttributeTable Items="GetAttributes()"></AttributeTable>
